import { AbstractImage, AbstractSlider, ImageTextCard } from "@/components";
import { ItemTypes } from "@/data/pages/pagesTypes";
import { ImageStringFormat } from "@/data/shared/mediaTypes";
import { navigateTo } from "@/utils/navigation";
import { View } from "@tarojs/components";
import { ImageTextCardProps } from "../ImageTextCard";
import style from "./index.module.scss";
import { ActionKeys, ActionNames, sendAction } from "@/utils/tracking";
import { ApiShopItemsMapping } from "@/data/shop/shopTypes";

export type DefaultSliderWrapperProps = {
  images: ImageStringFormat[];
  cardData?: never;
  type?: "default";
  hideScroller?: boolean;
  inlineStyleOverrides?: never;
  shopItemType?: ApiShopItemsMapping;
  shopItemTypeName: string;
};

interface ImageTextCardPropsWithId extends ImageTextCardProps {
  cardId: number;
  redirect: ItemTypes;
  shopItemType?: ApiShopItemsMapping;
}

export type CardBannerProps = {
  type: "card-banner" | "card-banner-shop";
  cardData: ImageTextCardPropsWithId[];
  images?: never;
  hideScroller?: boolean;
  shopItemTypeName?: string;
};

const DefaultSliderWrapper = ({
  type = "default",
  cardData,
  images,
  hideScroller = false,
  shopItemTypeName,
}: DefaultSliderWrapperProps | CardBannerProps) => {
  const onSliderItemClick = (
    cardData: ImageTextCardPropsWithId & { typeName?: string }
  ) => {
    if (cardData.type === "recommendation-mixed") {
      sendAction(ActionNames.DetailMaybeLikeClick, {
        [ActionKeys.MaybeLikeSku]: cardData.title,
        [ActionKeys.MaybeLikeType]: cardData.type,
      });
    }

    switch (cardData.redirect) {
      case "course":
        sendAction(ActionNames.DetailRecommendClick, {
          [ActionKeys.SuggestionName]: cardData.title,
          [ActionKeys.SuggestionType]: cardData.redirect,
        });
        break;

      case "exhibition":
        sendAction(ActionNames.ExhibitionGlobeOverviewClick, {
          [ActionKeys.ExhibitionName]: cardData.title,
          [ActionKeys.ExhibitionLocation]: cardData.location ?? "",
        });
        break;

      case "shopitem":
        let cardTypeKey = "";

        switch (cardData.shopItemType) {
          case ApiShopItemsMapping.Giftcertificate:
            cardTypeKey = "GiftCard";
            break;

          case ApiShopItemsMapping.Souvenir:
            cardTypeKey = "Souvenir";
            break;

          case ApiShopItemsMapping.Publication:
            cardTypeKey = "Publication";
            break;

          default:
            break;
        }

        if (cardTypeKey !== "") {
          sendAction(ActionNames[`ShopList${cardTypeKey}Click`], {
            [ActionKeys[`${cardTypeKey}Name`]]: cardData.title,
            [ActionKeys[`${cardTypeKey}Type`]]: shopItemTypeName,
            [ActionKeys[`${cardTypeKey}Amount`]]: cardData.cost + "",
          });
        }

      default:
        break;
    }

    navigateTo(`pages/${cardData.redirect}-detail/index?id=${cardData.cardId}`);
  };

  return (
    <AbstractSlider hideScroll={hideScroller}>
      {type === "default"
        ? // Simple wide card (no click needed)
          images?.map((image, imgIdx) => {
            return (
              <AbstractImage
                key={`${image}-${imgIdx}`}
                src={image}
                type="corner-cut-wide-default"
                className={style["slider-card"]}
              />
            );
          })
        : // If reaching here is a card-slider
          cardData?.map((singleCardData, singleCardDataIdx) => {
            const { cardId, redirect } = singleCardData;
            return (
              <View
                className={`${
                  type === "card-banner-shop"
                    ? style["slider-card-shop"]
                    : style["slider-card"]
                }`}
                key={`${cardId}-$${redirect}-${singleCardDataIdx}`}
                onClick={() => onSliderItemClick(singleCardData)}
              >
                <ImageTextCard
                  imagePath={singleCardData.imagePath}
                  type={singleCardData.type}
                  title={singleCardData.title}
                  tag={singleCardData.tag}
                  cost={singleCardData.cost}
                  location={singleCardData.location}
                  themeColor={singleCardData.themeColor}
                />
              </View>
            );
          })}
    </AbstractSlider>
  );
};

export default DefaultSliderWrapper;
